<template>
  <div id="app">
    <input type="text" v-model="msg1">
    <hr>
    <h3>:value 和 @input 组合</h3>
    <!-- 1. 单独写了：value  数据变化，视图更新 -->
    <!-- 2. 视图变化-> 数据更新 @input事件监听页面的输入 -->
    <input type="text" :value="msg2" @input="handleInput">
    <hr>

    <h3>:value 和 change事件的组合</h3>
    <!-- .lazy 失去焦点或者回车的时候修改数据 -->
    <input type="text" v-model.lazy="desc">
    <!-- 1. ：value 实现了数据变化 视图更新 -->
    <!-- 2. @change 实现视图变化，数据更新 -->
    <!-- <input type="text" :value="desc" @change="handleChange"> -->

    <hr>
    <h3>:checked 和 change事件</h3>
    <!-- <input type="checkbox" v-model="flag"> -->
    <!-- $event 在模板上，表示事件对象 -->
    <input type="checkbox" :checked="flag" @change="flag = $event.target.checked">


    <!-- 1. 默认情况 v-model   :value + @input -->
    <!-- 2. v-model.lazy      input是change事件 :value + @change -->
    <!-- 3. 如果input是checkbox   :checked + @change  -->
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      msg1:666,
      msg2:777,
      desc:'描述~~~',
      flag:true
    }
  },
  methods:{
    handleInput(e){
      // 默认参数就是事件对象
      console.log(e.target.value) // string
      this.msg2 = +e.target.value
    },
    handleChange(e){
      console.log(e.target.value)
      this.desc = e.target.value
    }
  }

}
</script>

